<template>
  <div class="app-container">
    <!-- 搜索 -->
    <div>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-select v-model="fileTag" clearable placeholder="请选择业务类型" style="width: 100%;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input  placeholder="输入文件标题关键字" v-model="keyword"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select
              style="width: 100%;"
              v-model="Yvalue"
              filterable
              allow-create
              default-first-option
              @change="yearchange"
              placeholder="年份">
              <el-option
                v-for="item in Yoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
              style="width: 100%;"
              v-model="Mvalue"
              filterable
              allow-create
              default-first-option
              @change="monthchange"
              placeholder="月份">
              <el-option
                v-for="item in Moptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
              style="width: 100%;"
              v-model="Dvalue"
              filterable
              allow-create
              default-first-option
              @change="daychange"
              placeholder="日期">
              <el-option
                v-for="item in Doptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="2">
          <el-button style="width: 100%;" type="primary" @click="getGongwenHistoryList">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="padding-top: 10px;"></div>
    <!-- 历史公文 -->
    <el-table v-loading="listLoading" :data="list" style="width: 100%" element-loading-text="Loading" border stripe fit
      highlight-current-row>
      <el-table-column label="业务类型" align="center" width="100px">
        <template slot-scope="scope">
          <b>
            <el-tag> {{ getTypeStr(scope.row.typ) }}</el-tag>
          </b>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="内容摘要" align="center">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column label="收藏时间" align="center">
        <template slot-scope="scope">
          {{ formatYearMonthDay(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="seeDetail(scope.row.typ, scope.row.relevenceId)">
            查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding-top: 20px;" />

    <el-pagination :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageCount"
      layout="total, prev, pager, next, jumper" :total="dataTotal" @size-change="onGongwenHistoryPageSizeChange"
      @current-change="onGongwenHistoryCurrentPageChange" />

    <el-dialog title="" width="60%" :visible.sync="detailDialog.visible" top="5vh">
      <chuanyuewenjian-detail v-if="detailDialog.visible17" :id="detailDialog.id17" />
      <gongwenliuzhuan-detail v-if="detailDialog.visible18" :id="detailDialog.id18" />
      <neibufawen-detail v-if="detailDialog.visible23" :id="detailDialog.id23" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="(detailDialog.visible = false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import ChuanyuewenjianDetail from '../../components/details/chuanyuewenjianDetail.vue'
import GongwenliuzhuanDetail from '../../components/details/gongwenliuzhuanDetail.vue'
import NeibufawenDetail from '../../components/details/neibufawenDetail.vue'

import { websock } from '@/websock'

import moment from 'moment'

export default {
  components: {
    ChuanyuewenjianDetail,
    GongwenliuzhuanDetail,
    NeibufawenDetail
  },
  data() {
    return {
      options:[],
      list: null,
      listLoading: false,
      pageIndex: 1,
      pageCount: 10,
      keyword: '',
      fileTag: '', // 业务类型
      dataTotal: 0,
      detailDialog: {
        visible: false,
        visible17: false,
        visible18: false,
        visible23: false,
        id17: null,
        id18: null,
        id23: null
      },
      Yoptions: [],
      Yvalue: 0,
      Moptions: [{value: 0, label: '全部月份'}],
      Mvalue: 0,
      Doptions: [{value: 0, label: "全部日期"}],
      Dvalue: 0,
    }
  },
  async created() {
    this.getGongwenHistoryList()
    this.fetchData()

    let startYear = 2022
    let endYear = new Date().getFullYear()
    let yearRange = [{value: 0, label: '全部年份'}]
    for (let i = startYear; i <= endYear; i++) {
      yearRange.push({
        value: i,
        label: `${i}年`
      })
    }
    this.Yoptions = yearRange
  },
  methods: {
    // 获取数据
    fetchData() {
      websock
        .fileTagList()
        .then((data) => {
          console.log(data)
          this.options = data.map((v) => {
            return {
              value: v.id,
              label: v.name
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getGongwenHistoryList() {
      console.log('get gongwen history list')
      websock.gongwenHistoryListWeb({
        keyword: this.keyword,
        year: this.Yvalue,
        month: this.Mvalue,
        day: this.Dvalue,
        pageIndex: this.pageIndex,
        pageCount: this.pageCount,
        fileTag: this.fileTag
      }).then(data => {
        this.listLoading = false
        this.list = data.list
        this.dataTotal = data.count
      })
    },
    onGongwenHistoryPageSizeChange(val) {
      this.pageCount = val
      this.getGongwenHistoryList()
    },
    onGongwenHistoryCurrentPageChange(val) {
      this.pageIndex = val
      this.getGongwenHistoryList()
    },
    formatYearMonthDay(src) {
      return moment(src).format('YYYY-MM-DD')
    },
    getTypeStr(typ) {
      if (typ == 17) {
        return '传阅文件'
      }
      if (typ == 18) {
        return '公文流转'
      }
      if (typ == 23) {
        return '内部发文'
      }
      return '其它'
    },
    seeDetail(typ, id) {
      this.detailDialog.visible17 = false
      this.detailDialog.visible18 = false
      this.detailDialog.visible23 = false

      this.detailDialog.visible = true
      this.detailDialog['visible' + typ] = true
      this.detailDialog['id' + typ] = id
    },
    yearchange(e) {
      console.log("year change:", e, this.Yvalue)
      this.Yvalue = e
      if (e == 0) {
      this.Moptions = [ { value: 0, label: "全部月份" }, ]
      this.Mvalue = 0
      this.Doptions = [ { value: 0, label: "全部日期" }, ]
      this.Dvalue = 0
      } else {
      this.Moptions = [
        { value: 0, label: "全部月份" },
        { value: 1, label: "1月" },
        { value: 2, label: "2月" },
        { value: 3, label: "3月" },
        { value: 4, label: "4月" },
        { value: 5, label: "5月" },
        { value: 6, label: "6月" },
        { value: 7, label: "7月" },
        { value: 8, label: "8月" },
        { value: 9, label: "9月" },
        { value: 10, label: "10月" },
        { value: 11, label: "11月" },
        { value: 12, label: "12月" },
        ]
      }
    },
    monthchange(e) {
      console.log('month change:',e)
      this.Mvalue = e
      if (e == 0) {
        this.Doptions = [ { value: 0, label: "全部日期" }, ]
        this.Dvalue = 0
      } else {
        let year = this.Yvalue
        let month = e
        let days = new Date(year, month, 0).getDate()
        let dayRange = [ { value: 0, label: "全部日期" }, ]
        for (let i = 1; i <= days; i++) {
          dayRange.push({
            value: i,
            label: `${i}日`
          })
        }
        this.Doptions = dayRange
      }
    },
    daychange(e) {
      console.log("day change:", e)
      this.Dvalue = e
    },
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
